<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%--
  Created by IntelliJ IDEA.
  User: MOZZ
  Date: 2021/12/19
  Time: 13:12
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<c:set var="blogs" scope="request" value="${requestScope.blogs}" />
<%--判断是否登录--%>
<c:set var="user" value="${sessionScope.user}" />
<c:if test="${user==null}">
  <c:redirect url="login.jsp" />
</c:if>
<html>

<head>
  <title>个人中心</title>
  <link rel="stylesheet" href="public/css/iconfont.css">
  <link rel="stylesheet" href="public/css/bootstrap/css/bootstrap.min.css">
  <link rel="stylesheet" href="public/css/markdown.css">
  <link rel="stylesheet" href="public/css/user_home.css">
  <link rel="stylesheet" href="public/css/layout/header.css">
</head>

<body>
  <div class="tar-bar">
    <div class="left-box">
      <div class="menu-item">
        <a href="codeBlog"><span class="iconfont icon-home"></span>首页</a>
      </div>
      <div class="menu-item">
        <a href="timeline.jsp?userId=${user.id}"><span class="iconfont icon-time-line"></span>时间轴</a>
      </div>
      <div class="menu-item">
        <a href="TagsServlet"><span class="iconfont icon-tag"></span>标签</a>
      </div>
      <div class="menu-item">
        <span class="iconfont icon-about"></span> 关于
      </div>
    </div>
    <div class="right-box">
      <div class="menu-item">
        <a href="CategoryServlet?userId=${user.id}"><span class="iconfont icon-folder-open"></span>分类</a>
      </div>
      <c:if test="${user!=null}">
        <div class="menu-item">
          <!-- <span><a href="UserHomeServlet?userId=${user.id}"><c:out value="${user.nickName}"/></a></span>
                <div class="avatar-box">
                    <img class="avatar" src="uploads/avatar/${user.avatar}" alt="">
                </div> -->
          <a href="UserHomeServlet?userId=${user.id}"><span class="iconfont icon-user"></span>个人中心</a>
        </div>
      </c:if>
      <c:if test="${user==null}">
        <div class="menu-item">
          <a href="login.jsp"><button class="btn btn-success">登录</button></a>
        </div>
      </c:if>
      <div class="menu-item public-btn">
        <a href="add_blog.jsp"><button class="btn">发表博客</button></a>
      </div>
    </div>
  </div>
  <div class="banner">
    <div class="banner-bg"></div>
    <div class="type-box">
      <div id="typeWriter"></div>
      <span class="cursor"></span>
    </div>
  </div>
  <div class="container main-box">
    <c:if test="${user != null}">
      <div class="info-box">
        <div class="sticky-top">
          <div id="user-box">
            <div class="avatar-box">
              <img class="avatar" src="uploads/avatar/${user.avatar}" alt="">
            </div>
            <div class="username">
              ${user.nickName}
            </div>
            <div class="email">
              ${user.email}
            </div>
            <div class="status-box">
              <div class="status-item">
                <div class="status-item-name">动态</div>
                <div class="status-count">${user.blogCount}</div>
              </div>
              <div class="status-item">
                <div class="status-item-name">收藏</div>
                <div class="status-count">${user.collectionCount}</div>
              </div>
              <div class="status-item">
                <div class="status-item-name">关注</div>
                <div class="status-count">${user.subscribeCount}</div>
              </div>
            </div>
            <div class="btn-box"><button onclick="showPopupPanel()" id="changeInfo-btn"
                class="btn btn-outline-primary">修改信息</button></div>
            <div class="btn-box">
              <form action="LogoutServlet" method="post">
                <button onclick="return logout()" type="submit" id="logout-btn"
                  class="btn btn-outline-danger">注销</button>
              </form>
            </div>
          </div>

        </div>
      </div>
    </c:if>
    <div id="blog-box">
      <div id="tabbar" class="sticky-top">
        <div class="tabbar-item"><span class="iconfont icon-gongsidongtai"></span><a
            href="UserHomeServlet?userId=${user.id}">动态</a></div>
        <div class="tabbar-item active"><span class="iconfont icon-collection"></span><a
            href="UserCollectionsServlet?userId=${user.id}">收藏</a></div>
        <div class="tabbar-item"><span class="iconfont icon-love"></span><a
            href="UserSubscribeServlet?userId=${user.id}">关注</a></div>
      </div>
      <c:if test="${blogs.size()==0}">
        <div class="item-box">
          暂无收藏
        </div>
      </c:if>
      <c:if test="${blogs.size()>0}">
        <c:forEach var="item" items="${blogs}">
          <div class="item-box">
            <div class="item-title">
              <a href="BlogDetailServlet?id=${item.id}">
                <c:out value="${item.title}" /></a>
            </div>
            <div class="item-content" id="markdown-box">
              ${item.content}
            </div>
            <div class="icon-box">
              <div class="item-user"><span class="iconfont icon-user"></span>
                <c:out value="${item.user.nickName}" />
              </div>
              <div class="item-public-time"><span class="iconfont icon-calendar"></span>
                <fmt:formatDate pattern="yyyy/MM/dd" value="${item.publicTime}" />
              </div>
              <c:if test="${item.tags.size()>0}">
                <div class="item-tags"><span class="iconfont icon-tag"></span>
                  <c:forEach var="tag" items="${item.tags}">
                    <span><a href="TagsServlet?tagId=${tag.id}">
                        <c:out value="${tag.name}" /></a></span>
                  </c:forEach>
                </div>
              </c:if>
            </div>
            <div class="btn-box">
              <form action="UnCollectionServlet" method="post" onclick="return unCollection()">
                <input type="hidden" name="blogId" value="${item.id}">
                <input type="hidden" name="userId" value="${user.id}">
                <button type="submit" class="btn btn-danger">取消收藏</button>
              </form>
              <!-- <a href="UpdateServlet?blogId=${item.id}"><button class="btn btn-info">修改</button></a>
                  <form action="DeleteBlogServlet" method="post" onclick="return deleteBlog()">
                    <input type="hidden" name="blogId" value="${item.id}">
                    <button type="submit" class="btn btn-danger">删除</button>
                  </form> -->
            </div>
          </div>
        </c:forEach>
      </c:if>
    </div>
  </div>
  <div id="update-mask">
    <div class="pop-panel">
      <form action="UpdateUserInfoServlet" enctype="multipart/form-data" method="post">
        <input type="hidden" name="id" value="${user.id}">
        <h4>修改信息</h4>
        <div class="form-group">
          <label>用户名</label>
          <input type="text" class="form-control" name="nickName">
        </div>
        <div class="form-group">
          <label>邮箱</label>
          <input type="email" class="form-control" name="email">
        </div>
        <div class="form-group">
          <label>密码</label>
          <input type="password" class="form-control" name="password">
        </div>
        <label>修改头像</label>
        <div class="custom-file">
          <input type="file" class="custom-file-input" id="customFile" name="avatar">
          <label class="custom-file-label" for="customFile">选择头像</label>
        </div>
        <div class="btn-group">
          <button class="btn btn-success" type="submit">提交</button>
          <button type="button" onclick="showPopupPanel()" class="btn btn-outline-secondary" type="submit">取消</button>
        </div>
      </form>
    </div>
  </div>
</body>
<script src="public/js/jquery/jquery.js"></script>
<script src="public/js/typewriter.js"></script>

<script>
  function unCollection() {
    let ret = confirm("确认取消收藏？")
    return ret;
  }

  function logout() {
    let ret = confirm("确认要注销？")
    return ret;
  }

  let popFlag = false

  function showPopupPanel() {
    popFlag = !popFlag
    if (popFlag) {
      $("#update-mask").css("display", "flex")
    } else {
      $("#update-mask").css("display", "none")
      return
    }
  }
</script>

</html>